<template>
  <div class="order-details">
    <!-- 给header上与data上加on为退款订单-->
    <div
      class="header bg-color-red acea-row row-middle"
      :class="refundOrder ? 'on' : ''"
    >
      <div class="left" v-if="orderInfo.paid === 0">
        <p class="title">买家未付款</p>
        <p class="alert">{{orderInfo.cancel_time_text}}后订单自动取消</p>
      </div>
      <div class="right" v-if="orderInfo.paid === 0">
        <img src="@assets/images/icon-unpaid.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.status === 0 &&
            orderInfo.refund_status === 0
        "
      >
        <p class="title1">等待商家发货</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.status === 0 &&
            orderInfo.refund_status === 0
        "
      >
        <img src="@assets/images/waitshopping.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 3
        "
      >
        <p class="title1">退款成功</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 3
        "
      >
        <img src="@assets/images/ytuisuccess.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 4
        "
      >
        <p class="title1">退款失败</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 4
        "
      >
        <img src="@assets/images/ytuisuccess.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 5
        "
      >
        <p class="title1">交易成功</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 2 &&
            orderInfo.sale_status === 5
        "
      >
        <img src="@assets/images/ytuisuccess.png" alt="" />
      </div>
      <div
        class="left"
        v-if="
          orderInfo.refund_status === 0 &&
            orderInfo.status === 2 &&
            orderInfo.is_system_del === 0
        "
      >
        <p class="title1">交易成功</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.refund_status === 0 &&
            orderInfo.status === 2 &&
            orderInfo.is_system_del === 0
        "
      >
        <img src="@assets/images/yjiaosuccess.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.refund_status === 0 &&
            orderInfo.status === 3 &&
            orderInfo.is_system_del === 0
        "
      >
        <p class="title1">交易成功</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.refund_status === 0 &&
            orderInfo.status === 3 &&
            orderInfo.is_system_del === 0
        "
      >
        <img src="@assets/images/yjiaosuccess.png" alt="" />
      </div>

      <div class="left" v-if="orderInfo.is_system_del === 1">
        <p class="title">交易成功</p>
        <p class="alert">订单关闭</p>
      </div>
      <div class="right" v-if="orderInfo.is_system_del === 1">
        <img src="@assets/images/yclose.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 0
        "
      >
        <p class="title1">退款申请中</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 0
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 1 &&
            orderInfo.apply_name == ''
        "
      >
        <p class="title1">审核通过，请退货</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 1 &&
            orderInfo.apply_name == ''
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>
      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 1 &&
            orderInfo.apply_name != ''
        "
      >
        <p class="title1">退款中</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 1 &&
            orderInfo.apply_name != ''
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>
      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 3
        "
      >
        <p class="title1">退款成功</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 3
        "
      >
        <img src="@assets/images/ytuisuccess.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 2
        "
      >
        <p class="title1">审核未通过</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 2
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 5
        "
      >
        <p class="title1">交易完成</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 5
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>
      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 4
        "
      >
        <p class="title1">退款失败</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 1 &&
            orderInfo.sale_status == 4
        "
      >
        <img src="@assets/images/ytuikuanzhong.png" alt="" />
      </div>

      <div
        class="left"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.status === 1 &&
            orderInfo.refund_status !== 2
        "
      >
        <p class="title1">商家已发货</p>
      </div>
      <div
        class="right"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.status === 1 &&
            orderInfo.refund_status !== 2
        "
      >
        <img src="@assets/images/yifahuo.png" alt="" />
      </div>
      <!-- <div class="pictrue" v-if="!refundOrder">
        <img :src="orderInfo.status_pic" />
      </div>
      <div class="data" :class="refundOrder ? 'on' : ''">
        <div class="state">{{ orderInfo._status._msg }}</div>
        <div>
          {{ orderInfo.add_time_y
          }}<span class="time">{{ orderInfo.add_time_h }}</span>
        </div>
      </div> -->
    </div>
    <template>
      <!-- <div class="nav">
        <div class="navCon acea-row row-between-wrapper">
          <div :class="{ on: status.type === 0 || status.type === 9 }">
            待付款
          </div>
          <div
            :class="{ on: status.type === 1 }"
            v-if="orderInfo.shipping_type === 2"
          >
            待核销
          </div>
          <div :class="{ on: status.type === 1 }" v-else>待发货</div>
          <div
            :class="{ on: status.type === 2 }"
            v-if="orderInfo.shipping_type === 1"
          >
            待收货
          </div>
          <div :class="{ on: status.type === 3 }">待评价</div>
          <div :class="{ on: status.type === 4 }">已完成</div>
        </div>
        <div class="progress acea-row row-between-wrapper">
          <div
            class="iconfont"
            :class="[
              status.type === 0 || status.type === 9
                ? 'icon-webicon318'
                : 'icon-yuandianxiao',
              status.type >= 0 ? 'font-color-red' : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 1 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 1 && status.type != 6 && status.type != 9
            }"
            v-if="orderInfo.shipping_type === 1"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 2 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
            v-if="orderInfo.shipping_type === 1"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 2 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 3 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 3 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 4 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
        </div>
      </div> -->
      <!-- <div
        class="writeOff"
        v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"
      >
        <div class="title">核销信息</div>
        <div class="grayBg">
          <div class="pictrue"><img :src="orderInfo.code" /></div>
        </div>
        <div class="gear"><img src="@assets/images/writeOff.jpg" /></div>
        <div class="num">{{ orderInfo._verify_code }}</div>
        <div class="rules">
          <div class="item">
            <div class="rulesTitle acea-row row-middle">
              <span class="iconfont icon-shijian"></span>核销时间
            </div>
            <div class="info">
              每日：<span class="time">{{ system_store.day_time }}</span>
            </div>
          </div>
          <div class="item">
            <div class="rulesTitle acea-row row-middle">
              <span class="iconfont icon-shuoming1"></span>使用说明
            </div>
            <div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
          </div>
        </div>
      </div> -->
      <!-- <div
        class="map acea-row row-between-wrapper"
        v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"
      >
        <div>自提地址信息</div>
        <div
          class="place cart-color acea-row row-center-wrapper"
          @click="showChang"
        >
          <span class="iconfont icon-weizhi"></span>查看位置
        </div>
      </div> -->
      <div class="address">
        <div class="address-icon" v-if="orderInfo.is_virtual == 0">
          <img src="@assets/images/address-icon.png" />
        </div>
        <div class="address-detail">
          <div class="name" v-if="orderInfo.is_virtual == 0">
            {{ orderInfo.real_name
            }}<span class="phone">{{ orderInfo.user_phone }}</span>
          </div>
          <div class="only_phone name" v-if="orderInfo.is_virtual == 1">
            <span class="title">手机号</span>
            <span class="phone">{{ orderInfo.user_phone }}</span>
          </div>
          <div class="address-p" v-if="orderInfo.is_virtual == 0">
            {{ orderInfo.user_address }}
          </div>
        </div>
      </div>
      <!-- <div class="address" v-else>
        <div class="name">
          {{ system_store.name
          }}<span class="phone">{{ system_store.phone }}</span>
          <a
            class="iconfont icon-tonghua font-color-red"
            :href="'tel:' + system_store.phone"
          ></a>
        </div>
        <div>{{ system_store._detailed_address }}</div>
      </div> -->
      <!-- <div class="line" v-if="orderInfo.shipping_type === 1">
        <img src="@assets/images/line.jpg" />
      </div> -->
    </template>
    <OrderGoods
      :evaluate="status.type || 0"
      :type="1"
      :cartInfo="orderInfo.cartInfo || []"
    ></OrderGoods>
    <div
      class="footer acea-row row-right row-middle"
      style="justify-content: flex-end;padding-top:0.26rem;"
    >
      <template v-if="status.type === 0">
        <!-- <div class="bnt cancel" @click="cancelOrder">取消订单</div> -->
        <!-- <div class="bnt bg-color-red" @click="pay = true">立即付款</div> -->
      </template>
      <template v-if="status.type === 1">
        <div
          class="bnt cancel"
          v-if="orderInfo.is_virtual == 0"
          v-show="
            orderInfo.is_diff != '2' &&
              orderInfo.sale_status != '0' &&
              orderInfo.sale_status != '1' &&
              orderInfo.sale_status != '2' &&
              orderInfo.sale_status != '3' &&
              orderInfo.sale_status != '4' &&
              orderInfo.sale_status != '5'
          "
          @click="drawback(status.type, orderInfo)"
        >
          申请退款
        </div>
        <div
          style="width:2.2rem;"
          class="bnt cancel"
          v-show="orderInfo.is_diff != '2' && orderInfo.sale_status == '1'"
          @click="toBooking(orderInfo.order_id)"
        >
          填写退货物流单号
        </div>
        <div class="bnt cancel" @click="changeAddress(orderInfo.order_id)">
          更换地址
        </div>
      </template>
      <template v-if="status.type === 2">
        <div
          class="bnt cancel"
          v-if="orderInfo.delivery_type === 'express'"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
        <div class="bnt bg-color-red" @click="takeOrder">
          确认收货
        </div>
      </template>
      <template v-if="status.type === 3">
        <div
          v-if="
            orderInfo.paid === 1 &&
              orderInfo.refund_status === 0 &&
              orderInfo.is_virtual == 0
          "
          v-show="
            orderInfo.is_diff != '2' &&
              orderInfo.sale_status != '0' &&
              orderInfo.sale_status != '1' &&
              orderInfo.sale_status != '2' &&
              orderInfo.sale_status != '3' &&
              orderInfo.sale_status != '4' &&
              orderInfo.sale_status != '5'
          "
          class="bnt cancel"
          @click="drawback(status.type, orderInfo)"
        >
          申请退款
        </div>
        <div
          style="width:2.2rem;"
          class="bnt cancel"
          v-if="orderInfo.paid === 1 && orderInfo.refund_status === 0"
          v-show="orderInfo.is_diff != '2' && orderInfo.sale_status == '1'"
          @click="toBooking(orderInfo.order_id)"
        >
          填写退货物流单号
        </div>
        <div
          v-if="orderInfo.delivery_type === 'express'"
          class="bnt cancel"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
      </template>
      <template v-if="status.type === 4">
        <div
          v-if="
            orderInfo.paid === 1 &&
              orderInfo.refund_status === 0 &&
              orderInfo.is_virtual == 0
          "
          v-show="
            orderInfo.is_diff != '2' &&
              orderInfo.cartInfo[0].productInfo.is_seven_returned == 1 &&
              orderInfo.sale_status != '0' &&
              orderInfo.sale_status != '1' &&
              orderInfo.sale_status != '2' &&
              orderInfo.sale_status != '3' &&
              orderInfo.sale_status != '4' &&
              orderInfo.sale_status != '5'
          "
          class="bnt cancel"
          @click="drawback(status.type, orderInfo)"
        >
          申请退款
        </div>
        <div
          style="width:2.2rem;"
          class="bnt cancel"
          v-if="orderInfo.paid === 1 && orderInfo.refund_status === 0"
          v-show="
            orderInfo.is_diff != '2' &&
              orderInfo.sale_status == '1' &&
              orderInfo.cartInfo[0].productInfo.is_seven_returned == 1
          "
          @click="toBooking(orderInfo.order_id)"
        >
          填写退货物流单号
        </div>
        <!-- <div class="bnt cancel" @click="delOrder">
          删除订单
        </div> -->
        <div
          v-if="orderInfo.delivery_type === 'express'"
          class="bnt cancel"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
      </template>
      <template v-if="status.type === 6">
        <div
          v-if="
            orderInfo.paid === 1 &&
              orderInfo.refund_status === 0 &&
              orderInfo.is_virtual == 0
          "
          v-show="
            orderInfo.is_diff != '2' &&
              orderInfo.sale_status != '0' &&
              orderInfo.sale_status != '1' &&
              orderInfo.sale_status != '2' &&
              orderInfo.sale_status != '3' &&
              orderInfo.sale_status != '4' &&
              orderInfo.sale_status != '5'
          "
          class="bnt cancel"
          @click="drawback(status.type, orderInfo)"
        >
          申请退款
        </div>
        <div
          style="width:2.2rem;"
          class="bnt cancel"
          v-if="orderInfo.paid === 1 && orderInfo.refund_status === 0"
          v-show="orderInfo.is_diff != '2' && orderInfo.sale_status == '1'"
          @click="toBooking(orderInfo.order_id)"
        >
          填写退货物流单号
        </div>
        <!-- <div
          class="bnt bg-color-red"
          @click="
            $router.push({ path: '/activity/group_rule/' + orderInfo.pink_id })
          "
        >
          查看拼团
        </div> -->
      </template>
      <!-- <div
        class="bnt bg-color-red"
        @click="goOrderConfirm(orderInfo)"
        v-if="
          orderInfo.paid === 1 &&
            orderInfo.refund_status === 0 &&
            orderInfo.status >= 2
        "
      >
        再次购买
      </div> -->
    </div>

    <div class="goodCall">
      <img src="@assets/images/kefu.png" alt="" /><span @click="telshow()"
        >拨打客服电话</span
      >
    </div>

    <div class="details">
      <div class="oneList">
        <span class="left">商品总价</span>
        <span class="right">¥ {{ orderInfo.total_price }}</span>
      </div>
      <div class="oneList" v-if="orderInfo.is_virtual == 0">
        <span class="left">运费（快递）</span>
        <span class="right">¥ {{ orderInfo.total_postage }}</span>
      </div>
      <div class="oneList">
        <span class="left">首单立减</span>
        <span class="right">¥ {{ orderInfo.first_reduce_price }}</span>
      </div>
      <div class="oneList">
        <span class="left">优惠劵抵扣</span>
        <span class="right">¥ {{ orderInfo.coupon_price }}</span>
      </div>
      <div class="oneList">
        <span class="left">商品共计</span>
        <span class="right">{{ orderInfo.total_num }}件</span>
      </div>
      <div class="oneList">
        <span class="left black">订单总价</span>
        <span class="right black">￥{{ orderInfo.pay_price }}</span>
      </div>
      <div class="oneList">
        <span class="left big">实付款</span>
        <span class="right red" style="font-weight:500;"
          >￥{{ orderInfo.pay_price }}</span
        >
      </div>
      <div class="oneList" v-if="orderInfo.sale_status == 5">
        <span class="left big">退款总额</span>
        <span class="right red" style="font-weight:500;"
          >￥{{ orderInfo.refund_price }}</span
        >
      </div>
    </div>
    <!-- chen更改 -->
    <!-- <div style="height:0.18rem;background:rgba(0, 0, 0, 0.04);"></div> -->
    <div class="wrapper">
      <div class="wrapper-title">
        <span class="left">订单信息</span>
        <span
          class="right"
          v-if="orderInfo.paid == 1 && orderInfo.is_virtual == 1"
          @click="toCodeDetail(orderInfo.order_id)"
          >查看兑换码</span
        >
      </div>
      <div class="item acea-row row-between">
        <div>订单编号：</div>
        <div class="conter acea-row row-middle row-right">
          {{ orderInfo.order_id }}
          <!-- <span
            class="copy copy-data"
            :data-clipboard-text="orderInfo.order_id"
            >复制</span -->
          <!-- > -->
        </div>
      </div>
      <!-- <div class="item acea-row row-between" v-if="orderInfo.paid == 1">
        <div>交易编号：</div>
        <div class="conter acea-row row-middle row-right">
          {{ orderInfo.order_id
          }}
        </div>
      </div> -->
      <div class="item acea-row row-between">
        <div>下单时间：</div>
        <div class="conter" v-if="orderInfo.add_time_y">
          {{ orderInfo.add_time_y + " " + orderInfo.add_time_h }}
        </div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.paid == 1">
        <div>付款时间：</div>
        <div class="conter">
          {{ orderInfo._pay_time }}
        </div>
      </div>
      <div
        class="wrapper-title"
        v-if="
          orderInfo.sale_status == '2' ||
            orderInfo.sale_status == '4' ||
            (orderInfo.sale_status == '5' && orderInfo.sale_remark != '')
        "
      >
        商家反馈
      </div>
      <div
        class="item acea-row row-between"
        v-if="
          orderInfo.sale_status == '2' ||
            orderInfo.sale_status == '4' ||
            (orderInfo.sale_status == '5' && orderInfo.sale_remark != '')
        "
      >
        <div>{{ orderInfo.sale_remark }}</div>
      </div>
      <!-- <div class="item acea-row row-between">
        <div>订单类型：</div>
        <div class="conter">
          {{ orderTypeName }}
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>支付状态：</div>
        <div class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>支付方式：</div>
        <div class="conter">{{ orderInfo._status._payType }}</div>
      </div> -->
      <!-- <div class="item acea-row row-between" v-if="orderInfo.mark">
        <div>买家留言：</div>
        <div class="conter">{{ orderInfo.mark }}</div>
      </div> -->
      <div
        class="refund_msg"
        v-if="orderInfo.sale_status == '1' && orderInfo.refund_name != ''"
      >
        <p class="refund_title">退货信息</p>
        <div class="refund_name_phone">
          <p class="refund_name">退货联系人：{{ orderInfo.refund_name }}</p>
          <p class="refund_phone">联系方式：{{ orderInfo.refund_phone }}</p>
        </div>
        <div class="refund_address_new">
          <p class="address_title">退货地址：</p>
          <p class="address_comtent">{{ orderInfo.refund_address }}</p>
        </div>
      </div>
      <div
        @click="toBooking(orderInfo.order_id)"
        v-if="orderInfo.apply_name == '' && orderInfo.sale_status == '1'"
        style="width: 2.2rem;height: 0.54rem;text-align: center;line-height: 1;border: 1px solid #ddd;font-size: 0.24rem;border-radius: 0.08rem;-webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0.15rem 0;"
      >
        填写退货物流单号
      </div>
      <div
        class="wu_number"
        style="over:hidden;margin:0.2rem 0;height:0.3rem;"
        v-if="orderInfo.apply_name != ''"
      >
        <span style="float:left;margin-right:0.6rem;"
          >退货物流: {{ orderInfo.apply_name }}</span
        >
        <span style="float:left;"
          >物流单号: {{ orderInfo.apply_poster_num }}</span
        >
      </div>
    </div>

    <!-- <div v-if="orderInfo.status != 0">
      <div class="wrapper" v-if="orderInfo.delivery_type === 'express'">
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">
            发货
          </div>
        </div>
        <div class="item acea-row row-between">
          <div>快递公司：</div>
          <div class="conter">{{ orderInfo.delivery_name || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>快递号：</div>
          <div class="conter">{{ orderInfo.delivery_id || "" }}</div>
        </div>
      </div>

      <div class="wrapper" v-if="orderInfo.delivery_type === 'send'">
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">
            送货
          </div>
        </div>
        <div class="item acea-row row-between">
          <div>配送人：</div>
          <div class="conter">{{ orderInfo.delivery_name || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>配送电话：</div>
          <div class="conter acea-row row-middle row-right">
            {{ orderInfo.delivery_id || ""
            }}<a :href="'tel:' + orderInfo.delivery_id"
              ><span class="copy">拨打</span></a
            >
          </div>
        </div>
      </div>
    </div> -->
    <!--     退款订单详情 -->
    <!-- <div class="wrapper" v-if="refundOrder">
      <div class="item acea-row row-between">
        <div>收货人：</div>
        <div class="conter">{{ orderInfo.real_name }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>联系电话：</div>
        <div class="conter">{{ orderInfo.user_phone }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>收货地址：</div>
        <div class="conter">{{ orderInfo.user_address }}</div>
      </div>
    </div> -->
    <!-- <div class="wrapper">
      <div class="item acea-row row-between">
        <div>支付金额：</div>
        <div class="conter">￥{{ orderInfo.total_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.coupon_price > 0">
        <div>优惠券抵扣：</div>
        <div class="conter">-￥{{ orderInfo.coupon_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.use_integral > 0">
        <div>积分抵扣：</div>
        <div class="conter">-￥{{ orderInfo.deduction_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.pay_postage > 0">
        <div>运费：</div>
        <div class="conter">￥{{ orderInfo.pay_postage }}</div>
      </div>
      <div class="actualPay acea-row row-right">
        实付款：<span class="money font-color-red"
          >￥{{ orderInfo.pay_price }}</span
        >
      </div>
    </div> -->
    <div style="height:1.2rem;"></div>

    <Payment
      v-model="pay"
      :types="payType"
      @checked="toPay"
      :balance="userInfo.now_money"
    ></Payment>
    <div class="geoPage" v-if="mapShow">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="no"
        :src="
          'https://apis.map.qq.com/uri/v1/geocoder?coord=' +
            system_store.latitude +
            ',' +
            system_store.longitude +
            '&referer=' +
            mapKey
        "
      >
      </iframe>
    </div>
    <GeneralWindow
      :generalActive="generalActive"
      @closeGeneralWindow="closeGeneralWindow"
      :generalContent="generalContent"
    ></GeneralWindow>
    <!-- 客服弹窗 -->
    <div class="telbox" @click="telhide()" v-show="show == '1'">
      <div class="tel">
        <p class="telTitle">客服电话 {{ service_tel }}</p>
        <p class="telTime">工作日时间：周一至周五9:00-18:00</p>
        <p class="line"></p>
        <a :href="'tel:' + this.service_tel"
          ><p class="telSend">拨打客服电话</p></a
        >
      </div>
    </div>
    <!-- 下载 -->
    <div class="toastDownload" v-show="showdownlod == '1'" @click="quxiao()">
      <div class="modela">
        <p>请下载听见广播APP进行退款操作</p>
        <div>
          <span class="quxiao" @click.stop="quxiao()">取消</span>
          <span class="sure" @click.stop="downLoad()">去下载</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.toastDownload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
.toastDownload .modela {
  position: absolute;
  width: 6.22rem;
  height: auto;
  margin-left: 0.64rem;
  top: 50%;
  transform: translateY(-1.26rem);
  background: #fff;
  font-size: 0.28rem;
  border-radius: 0.16rem;
}
.toastDownload .modela h1 {
  margin-top: 0.64rem;
  font-size: 0.34rem;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  padding: 0 0.48rem;
}
.toastDownload .modela p {
  color: rgba(0, 0, 0, 0.5);
  line-height: 1;
  text-align: center;
  font-size: 0.32rem;
  padding: 0 0.48rem;
  padding-top: 0.64rem;
}
.toastDownload .modela div {
  text-align: center;
  margin-top: 0.66rem;
  display: flex;
  height: 1.04rem;
  width: 100%;
  border-top: 0.01rem solid rgba(0, 0, 0, 0.2);
  font-family: PingFangSC-Medium, PingFang SC;
  letter-spacing: 0.1rem;
}
.toastDownload .modela div .quxiao {
  flex: 1;
  color: rgba(102, 102, 102, 0.5);
  border-right: 0.01rem solid rgba(0, 0, 0, 0.2);
  line-height: 1.04rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
}
.toastDownload .modela div .sure {
  flex: 1;
  color: rgba(68, 115, 225, 1);
  line-height: 1.04rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
}
.telbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.5);
  overflow: hidden;
}
.tel {
  width: 6rem;
  height: 3.7rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.16rem;
  margin: 40% auto 0;
  box-sizing: border-box;
  text-align: center;
}
.telTitle {
  font-size: 0.34rem;
  color: #333;
  padding-top: 0.66rem;
}
.telTime {
  font-size: 0.32rem;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 0.36rem;
}
.line {
  width: 100%;
  height: 0.01rem;
  margin: 0.68rem auto 0.3rem;
  background: rgba(0, 0, 0, 0.2);
}
.telSend {
  font-size: 0.32rem;
  color: #4473e1;
}
.order-details .wrapper {
  padding: 0.24rem 0.3rem 0.18rem 0.3rem;
  margin-top: 0.2rem;
}
.order-details .wrapper .wrapper-title {
  color: rgba(0, 0, 0, 1);
  font-size: 0.24rem;
  padding-bottom: 0.2rem;
  line-height: 0.34rem;
  overflow: hidden;
}
.order-details .wrapper .wrapper-title .left {
  float: left;
}
.order-details .wrapper .wrapper-title .right {
  float: right;
  width: 1.74rem;
  height: 0.42rem;
  border-radius: 0.04rem;
  border: 1px solid #ff8e94;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ff323e;
  padding: 0.06rem 0.12rem;
  box-sizing: border-box;
  text-align: center;
  line-height: normal;
}
.acea-row.row-between {
  justify-content: flex-start;
  font-size: 0.2rem;
  color: rgba(0, 0, 0, 0.49);
  text-align: left;
}
.order-details .wrapper .item .conter {
  text-align: left;
  font-size: 0.2rem;
}
.acea-row.row-right {
  justify-content: flex-start;
  font-size: 0.2rem;
}
.goodCall {
  position: fixed;
  bottom: 0;
  left: 0;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  height: 1.12rem;
  box-shadow: 0rem -0.02rem 0.08rem 0rem rgba(0, 0, 0, 0.11);
  border-bottom: 0.01rem solid #eee;
  font-size: 0.24rem;
  line-height: 1;
  background: #fff;
}
.goodCall img {
  float: left;
  margin: 0.34rem 0.2rem 0 2.78rem;
  width: 0.36rem;
  height: 0.4rem;
}
.goodCall span {
  display: block;
  padding: 0.42rem 0;
  text-align: left;
}
.details {
  background: #fff;
}
.details .oneList {
  width: 7.5rem;
  padding: 0 0.3rem 0.2rem 0.3rem;
  overflow: hidden;
}
.details .oneList .left {
  float: left;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.24rem;
  line-height: 0.34rem;
}
.details .oneList .right {
  float: right;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.24rem;
  line-height: 0.34rem;
}
.details .oneList .black {
  color: rgba(0, 0, 0, 1);
}
.details .oneList .big {
  font-size: 0.3rem;
  line-height: 0.42rem;
  color: rgba(0, 0, 0, 1);
}
.details .oneList .red {
  font-size: 0.3rem;
  line-height: 0.42rem;
  color: rgba(252, 64, 74, 1);
}
.iconfont {
  margin-right: 0.15rem;
}
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}
.order-details .writeOff {
  background-color: #fff;
  margin-top: 0.13rem;
  padding-bottom: 0.3rem;
}
.order-details .writeOff .title {
  font-size: 0.3rem;
  color: #282828;
  height: 0.87rem;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0.3rem;
  line-height: 0.87rem;
}
.order-details .writeOff .grayBg {
  background-color: #f2f5f7;
  width: 5.9rem;
  height: 3.84rem;
  border-radius: 0.2rem 0.2rem 0 0;
  margin: 0.5rem auto 0 auto;
  padding-top: 0.55rem;
}
.order-details .writeOff .grayBg .pictrue {
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 auto;
}
.order-details .writeOff .grayBg .pictrue img {
  width: 100%;
  height: 100%;
  display: block;
}
.order-details .writeOff .gear {
  width: 5.9rem;
  height: 0.3rem;
  margin: 0 auto;
}
.order-details .writeOff .gear img {
  width: 100%;
  height: 100%;
  display: block;
}
.order-details .writeOff .num {
  background-color: #f0c34c;
  width: 5.9rem;
  height: 0.84rem;
  color: #282828;
  font-size: 0.48rem;
  margin: 0 auto;
  border-radius: 0 0 0.2rem 0.2rem;
  text-align: center;
  padding-top: 0.04rem;
}
.order-details .writeOff .rules {
  margin: 0.46rem 0.3rem 0 0.3rem;
  border-top: 0.01rem solid #f0f0f0;
  padding-top: 0.1rem;
}
.order-details .writeOff .rules .item {
  margin-top: 0.15rem;
}
.order-details .writeOff .rules .item .rulesTitle {
  font-size: 0.28rem;
  color: #282828;
}
.order-details .writeOff .rules .item .rulesTitle .iconfont {
  font-size: 0.3rem;
  color: #333;
  margin-right: 0.08rem;
  margin-top: 0.05rem;
}
.order-details .writeOff .rules .item .info {
  font-size: 0.28rem;
  color: #999;
  margin-top: 0.05rem;
}
.order-details .writeOff .rules .item .info .time {
  margin-left: 0.2rem;
}
.order-details .map {
  height: 0.86rem;
  font-size: 0.3rem;
  color: #282828;
  line-height: 0.86rem;
  border-bottom: 0.01rem solid #f0f0f0;
  margin-top: 0.13rem;
  background-color: #fff;
  padding: 0 0.3rem;
}
.order-details .map .place {
  font-size: 0.26rem;
  width: 1.76rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  line-height: 0.5rem;
  text-align: center;
}
.order-details .map .place .iconfont {
  font-size: 0.27rem;
  height: 0.27rem;
  line-height: 0.27rem;
  margin: 0.02rem 0.03rem 0 0;
}
.order-details .address .name .iconfont {
  font-size: 0.34rem;
  margin-left: 0.1rem;
}
.refund_msg {
  width: 100%;
  /* margin-top: 0.3rem; */
  /* background: rgba(247, 247, 247, 1); */
  height: auto;
  /* border-radius: 0.16rem; */
}
.refund_msg .refund_title {
  color: rgba(0, 0, 0, 1);
  font-size: 0.24rem;
  padding: 0.24rem 0.24rem 0.14rem 0;
  line-height: 0.34rem;
}
.refund_msg .refund_name_phone {
  display: flex;
  justify-content: flex-start;
  /* padding-left: 0.24rem; */
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 0.34rem;
}
.refund_msg .refund_name_phone .refund_name {
  padding-right: 0.5rem;
}
.refund_msg .refund_address_new {
  padding-bottom: 0.24rem;
  display: flex;
  justify-content: flex-start;
  /* padding-left: 0.24rem; */
  padding-right: 0.26rem;
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 0.34rem;
}
.refund_msg .refund_address_new .address_title {
  width: 1.2rem;
}
.refund_msg .refund_address_new .address_comtent {
  flex: 1;
}
.refund_msg_alert {
  font-weight: 400;
  color: #ff3c39;
  line-height: 0.28rem;
  font-size: 0.24rem;
  padding: 0 0 0 0.3rem;
}
.wu_number {
  width: 100%;
  /* padding-left: 0.24rem;  */
}
.wu_number span {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 0.34rem;
  font-size: 0.24rem;
}
</style>

<script>
import OrderGoods from "@components/OrderGoods";
import { orderDetail, orderAgain } from "@api/order";
import ClipboardJS from "clipboard";
import Payment from "@components/Payment";
import cookie from "@utils/store/cookie";
import { isWeixin } from "@utils";
import { mapGetters } from "vuex";
import {
  cancelOrderHandle,
  takeOrderHandle,
  delOrderHandle,
  payOrderHandle
} from "@libs/order";
import { wechatEvevt } from "@libs/wechat";
import { clearAuthStatus } from "@libs/wechat";
import GeneralWindow from "@components/GeneralWindow";
const NAME = "OrderDetails";
export default {
  name: NAME,
  components: {
    OrderGoods,
    Payment,
    GeneralWindow
  },
  props: {},
  data: function() {
    return {
      show: "0",
      offlinePayStatus: 2,
      orderTypeName: "普通订单",
      orderTypeNameStatus: true,
      offlineStatus: true,
      id: this.$route.params.id,
      orderInfo: {
        _status: {}
      },
      status: {},
      pay: false,
      payType: ["yue", "weixin"],
      from: "",
      system_store: {},
      mapKay: "",
      mapShow: false,
      generalActive: false,
      active: "",
      generalContent: {
        promoterNum: "",
        title: ""
      },
      from1: "",
      service_tel: "",
      orderId: "",
      service_tel: null,
      showdownlod: "",
      downloadmsg: "",
      btn: ""
    };
  },
  computed: {
    refundOrder() {
      return this.orderInfo.refund_status > 0;
    },
    ...mapGetters(["userInfo"])
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.id !== n.params.id) {
        this.id = n.params.id;
        this.getDetail();
      }
    }
  },
  inject: ["app"],
  mounted: function() {
    var that = this;
    // console.log(this.id)
    this.getDetail();
    const from1 = "from1";
    this.from1 = cookie.get(from1);
    if (this.from1 == "app") {
      window["onWebResponse"] = str => {
        that.onWebResponse(str);
      };
    }
    if (this.from1 == "wxapp") {
    }
    this.$nextTick(function() {
      let copybtn = document.getElementsByClassName("copy-data");
      const clipboard = new ClipboardJS(copybtn);
      clipboard.on("success", () => {
        this.$dialog.success("复制成功");
      });
    });
  },
  methods: {
    // 去兑换码页面
    toCodeDetail(id) {
      this.$router.push(`/user/user_exchangecode?id=${id}`);
    },
    //填写物流信息
    toBooking: function(id) {
      this.$router.push({ path: "/order/bookingNote?uni=" + id });
    },
    downLoad: function() {
      var self = this;

      if (this.btn == "登录") {
        console.log(this.loginurl);
        setTimeout(() => {
          self.$router.push({ path: self.loginurl });
        }, 1000);
      } else if (self.downloadmsg == "您的播豆不足，是否现在购买?") {
        this.showdownlod = "";
        self.sureBuy();
      } else if (self.btn == "重新登录") {
        self.$router.push({
          path: "./change?channel_id=" + self.cbct.getCookie("channel_id")
        });
      } else {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (isAndroid) {
          var ua = navigator.userAgent.split("(")[1].split(")")[0];
          // alert(ua);
          var phone = [
            /IPHONE/gi,
            /huawei/gi,
            /mi/gi,
            /vivo/gi,
            /OPPO/gi,
            /samsung/gi,
            /SONY/gi,
            /Nokia/gi,
            /HTC/gi,
            /ZTE/gi,
            /Lenovo/gi,
            /ZUK/gi
          ];
          if (phone[1].test(ua)) {
            window.location.href =
              "https://appgallery.cloud.huawei.com/uowap/index.html#/detailApp/C100594819?source=appshare&subsource=C100594819";
          } else if (phone[2].test(ua)) {
            window.location.href = "http://app.xiaomi.com/detail/760715";
          } else if (phone[3].test(ua)) {
            window.location.href =
              "http://appdetailh5.vivo.com.cn/detail/2418329?source=7";
          } else if (phone[4].test(ua)) {
            window.location.href =
              "http://appdetailh5.vivo.com.cn/detail/2418329?source=7";
          } else {
            var uas = navigator.userAgent.toLowerCase();
            if (uas.match(/MicroMessenger/i) == "micromessenger") {
              window.location.href =
                "https://sj.qq.com/myapp/detail.htm?apkName=cn.cbct.seefm";
            } else {
              window.location.href =
                "https://sj.qq.com/myapp/detail.htm?apkName=cn.cbct.seefm";
            }
          }
        }
        if (isIOS) {
          window.location.href =
            "https://itunes.apple.com/cn/app/%E5%90%AC%E8%A7%81%E5%B9%BF%E6%92%AD-%E5%8F%AF%E5%90%AC%E5%8F%AF%E7%9C%8B%E7%9A%84%E5%B9%BF%E6%92%AD%E7%94%B5%E5%8F%B0%E8%8A%82%E7%9B%AE%E7%9B%B4%E6%92%AD/id1439524045?mt=8";
        }
      }
    },
    quxiao: function() {
      this.showdownlod = "";
    },
    telshow() {
      console.log(this.service_tel.length);
      if (
        this.service_tel == null ||
        this.service_tel.length == "0" ||
        this.service_tel == undefined
      ) {
        return this.$dialog.toast({ mes: "系统正在维护中" });
      } else {
        this.show = "1";
      }
    },
    telhide() {
      this.show = "0";
    },
    changeAddress: function(id) {
      this.$router.push({
        path:
          "/user/add_address/" +
          id +
          "?type=-2&name=" +
          this.orderInfo.real_name +
          "&phone=" +
          this.orderInfo.user_phone +
          "&address=" +
          this.orderInfo.user_address +
          "&orderId=" +
          id
      });
    },
    // 嵌入app获取支付状态
    onWebResponse: function(str) {
      // alert(123);
      var obj = JSON.parse(str);
      var action = obj.action;
      var self = this;
      var content = obj.content;
      if (action == "setUserInfo") {
        let did = content.did;
        let isToken = content.ds_token;
        let expires_time = content.ds_expires_time;
        let isSalt = content.salt;
        if (isToken == "") {
          clearAuthStatus();
        } else {
          // alert(isToken);
          let newTime = Math.round(new Date() / 1000);
          this.$store.commit(
            "LOGIN",
            isToken
            // dayjs(expires_time) - newTime
          );
        }
      } else if (action == "payResult") {
        // let url = "/order/status/" + data.result.orderId;
        // this.$router.replace({
        //   path: url + "/2"
        // });
        if (content.status == "0") {
          // return this.$dialog.error("支付失败");
          this.$router.replace({
            path: "/order/status/" + content.data.order_id + "/2?from1=app"
          });
        } else if (content.status == "1") {
          // return this.$dialog.error("支付成功");
          this.$router.replace({
            path: "/order/status/" + content.data.order_id + "/2?from1=app"
          });
        }
      }
    },
    // 再次购买
    goOrderConfirm(e) {
      orderAgain(e.order_id)
        .then(res => {
          this.$router.push({
            path: "/order/submit/" + res.data.cateId
          });
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    },
    closeGeneralWindow(msg) {
      this.generalActive = msg;
      this.getDetail();
    },
    showChang: function() {
      if (isWeixin()) {
        let config = {
          latitude: parseFloat(this.system_store.latitude),
          longitude: parseFloat(this.system_store.longitude),
          name: this.system_store.name,
          address: this.system_store._detailed_address
        };
        wechatEvevt("openLocation", config)
          .then(res => {
            console.log(res);
          })
          .catch(res => {
            if (res.is_ready) {
              res.wx.openLocation(config);
            }
          });
      } else {
        if (!this.mapKey)
          return this.$dialog.error(
            "暂无法使用查看地图，请配置您的腾讯地图key"
          );
        this.mapShow = true;
      }
    },
    goBack() {
      const history = this.app.history,
        last = history[history.length - 1] || {};
      return this.$router.go(-1);
    },
    drawback(type, orderInfo) {
      if (this.from1 == "app") {
        if (type == "1") {
          this.$router.push({
            path:
              "/order/refund/" +
              orderInfo.order_id +
              "?is_diff=" +
              orderInfo.is_diff +
              "&name=" +
              orderInfo.real_name +
              "&phone=" +
              orderInfo.user_phone +
              "&pay_price=" +
              orderInfo.pay_price
          });
        } else if (type == "3") {
          this.$router.push({
            path:
              "/order/refund/" +
              orderInfo.order_id +
              "?is_diff=" +
              orderInfo.is_diff +
              "&name=" +
              orderInfo.real_name +
              "&phone=" +
              orderInfo.user_phone +
              "&pay_price=" +
              orderInfo.pay_price
          });
        } else if (type == "4") {
          this.$router.push({
            path:
              "/order/refund/" +
              orderInfo.order_id +
              "?is_diff=" +
              orderInfo.is_diff +
              "&name=" +
              orderInfo.real_name +
              "&phone=" +
              orderInfo.user_phone +
              "&pay_price=" +
              orderInfo.pay_price
          });
        } else if (type == "6") {
          this.$router.push({
            path:
              "/order/refund/" +
              orderInfo.order_id +
              "?is_diff=" +
              orderInfo.is_diff +
              "&name=" +
              orderInfo.real_name +
              "&phone=" +
              orderInfo.user_phone +
              "&pay_price=" +
              orderInfo.pay_price
          });
        }
      } else {
        this.gotodown();
      }
    },
    cancelOrder() {
      cancelOrderHandle(this.orderInfo.order_id)
        .then(() => {
          setTimeout(() => this.goBack(), 300);
        })
        .catch(() => {
          this.getDetail();
        });
    },
    // 下载
    gotodown: function(msg, btn1) {
      this.showdownlod = "1";
      this.downloadmsg = "请下载听见广播APP进行退款操作";
      this.btn = "去下载";
    },
    takeOrder() {
      this.$dialog.loading.open("正在加载中");
      takeOrderHandle(this.orderInfo.order_id)
        .then(res => {
          if (
            (res.data.gain_integral != "0.00" &&
              res.data.gain_coupon != "0.00") ||
            (res.data.gain_integral > 0 && res.data.gain_coupon > 0)
          ) {
            this.$dialog.loading.close();
            this.generalActive = true;
            this.generalContent = {
              promoterNum: `恭喜您获得${res.data.gain_coupon}元优惠券以及${res.data.gain_integral}积分，购买商品时可抵现哦～`,
              title: "恭喜您获得优惠礼包"
            };
            return;
          } else if (
            res.data.gain_integral != "0.00" ||
            res.data.gain_integral > 0
          ) {
            this.$dialog.loading.close();
            this.generalActive = true;
            this.generalContent = {
              promoterNum: `恭喜您获得${res.data.gain_integral}积分，购买商品时可抵现哦～`,
              title: "赠送积分"
            };
            return;
          } else if (
            res.data.gain_coupon != "0.00" ||
            res.data.gain_coupon > 0
          ) {
            this.$dialog.loading.close();
            this.generalActive = true;
            this.generalContent = {
              promoterNum: `恭喜您获得${res.data.gain_coupon}元优惠券，购买商品时可抵现哦～`,
              title: "恭喜您获得优惠券"
            };
            return;
          } else {
            this.$dialog.loading.close();
            this.$dialog.success("收货成功");
          }
          this.getDetail();
        })
        .catch(res => {
          this.$dialog.loading.close();
          this.$dialog.error(res.msg);
        });
    },
    delOrder() {
      delOrderHandle(this.orderInfo.order_id).then(() => {
        setTimeout(() => this.goBack(), 300);
      });
    },
    setOfflinePayStatus: function(status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 1 && that.orderTypeNameStatus === true) {
        that.payType.push("offline");
      }
    },
    getOrderStatus: function() {
      let orderInfo = this.orderInfo || {},
        _status = orderInfo._status || { _type: 0 },
        status = {};
      let type = parseInt(_status._type),
        delivery_type = orderInfo.delivery_type,
        seckill_id = orderInfo.seckill_id ? parseInt(orderInfo.seckill_id) : 0,
        bargain_id = orderInfo.bargain_id ? parseInt(orderInfo.bargain_id) : 0,
        combination_id = orderInfo.combination_id
          ? parseInt(orderInfo.combination_id)
          : 0;
      status = {
        type: type,
        class_status: 0
      };
      if (type === 1 && combination_id > 0) {
        status.type = 6;
        status.class_status = 1;
      } //查看拼团
      if (type === 2 && delivery_type === "express") status.class_status = 2; //查看物流
      if (type === 2) status.class_status = 3; //确认收货
      if (type === 4 || type === 0) status.class_status = 4; //删除订单
      if (
        !seckill_id &&
        !bargain_id &&
        !combination_id &&
        (type === 3 || type === 4)
      )
        status.class_status = 5; //再次购买
      if (type == 9) {
        //线下付款
        status.class_status = 0;
        this.offlineStatus = false;
      }
      this.status = status;
    },
    getDetail() {
      const id = this.id;
      if (!id) return this.$dialog.error("订单不存在");
      orderDetail(id)
        .then(res => {
          this.orderInfo = res.data;

          console.log(res.data.service_tel);
          this.service_tel = res.data.service_tel;
          this.getOrderStatus();
          if (this.orderInfo.combination_id > 0) {
            this.orderTypeName = "拼团订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.bargain_id > 0) {
            this.orderTypeName = "砍价订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.seckill_id > 0) {
            this.orderTypeName = "秒杀订单";
            this.orderTypeNameStatus = false;
          }
          this.system_store = res.data.system_store || {};
          this.mapKey = res.data.mapKey;
          this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
          this.$nextTick(function() {
            let copybtn = document.getElementsByClassName("copy-data");
            const clipboard = new ClipboardJS(copybtn);
            clipboard.on("success", () => {
              this.$dialog.success("复制成功");
            });
          });
        })
        .catch(err => {
          this.$dialog.error(err.msg);
          this.$router.go(-1);
        });
    },
    //ios微信支付做桥
    payTypes: function(data) {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const win = window;
      var obj = {
        action: "payBridge", //方法名
        content: {
          type: this.active, //微信 aliPay//支付宝
          data: data //支付信息
        }
      };
      if (isAndroid) {
        App.onAppResponse(JSON.stringify(obj));
      }
      if (isIOS) {
        win.webkit.messageHandlers.onAppResponse.postMessage(
          JSON.stringify(obj)
        );
      }
    },
    payTypeWxapp: function(data) {
      wx.miniProgram.navigateTo({
        url:
          "/pages/pay/pay?prepay_id=" +
          data.jsConfig.prepay_id +
          "&appid=" +
          data.jsConfig.appid +
          "&nonce_str=" +
          data.jsConfig.nonce_str +
          "&sign=" +
          data.jsConfig.sign +
          "&sign_type=" +
          data.jsConfig.sign_type +
          "&timeStamp=" +
          data.jsConfig.timeStamp +
          "&orderId=" +
          data.orderId
      });
    },
    async toPay(type) {
      var that = this;
      that.active = type;
      var isIOS1 = "";
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isIOS) {
        isIOS1 = "ios";
      } else {
        isIOS1 = "";
      }
      if (type == "aliPay") {
        if (that.from1 == "app" || that.from1.indexOf("app") != "-1") {
          that.from = "aliPayApp";
        } else {
          that.from = "aliPayH5";
        }
      } else if (type == "weChatPay") {
        if (that.from1 == "app" || that.from1.indexOf("app") != "-1") {
          that.from = "weChatPayApp";
        } else if (
          that.from1 == "wxapp" ||
          that.from1.indexOf("wxapp") != "-1"
        ) {
          that.from = "weChatPaywxApp";
        } else {
          that.from = isWeixin() ? "weChatPayH5" : "weChatPayPage";
        }
      }
      await payOrderHandle(
        this.orderInfo.order_id,
        type,
        that.from,
        isIOS1,
        cookie.get("OID")
      )
        .then(() => {})
        .catch(res => {
          const data = res.data;
          this.orderId = data.result.order_id;
          if (res.status === "WECHAT_PAY") {
            pay(data.result.jsConfig).finally(() => {
              this.$router.replace({
                path: "/order/status/" + data.result.order_id
              });
            });
          }
          if (res.status === "WECHAT_APP_PAY") {
            this.payTypes(data.result);
          }
          if (res.status === "ALI_APP_PAY") {
            this.payTypes(data.result);
          }
          if (res.status === "WECHAT_WXAPP_PAY") {
            this.payTypeWxapp(data.result);
          }
          if (res.status === "ALI_H5_PAY") {
            setTimeout(() => {
              location.href = data.result.jsConfig;
            }, 1);
          }
          if (res.status === "WECHAT_H5_PAY") {
            // return that.$router.push({
            //   path: "/order/status/" + order.order_id + "/5"
            // });
            setTimeout(() => {
              location.href = data.result.jsConfig.mweb_url;
            }, 1);
          }
        });
      that.getDetail();
    }
  }
};
</script>
